<template>
  <div class="agent-book-keep">
    <van-header title="代理记账"/>
    <img src="~assets/agencybookkeeping.png"/>
    <section class="process">
      <van-title :border="false" title="代理记账流程"/>
      <ul>
        <li>
          <dl>
            <dt>申请发票</dt>
            <dd class="right"></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>上门取票</dt>
            <dd class="right"></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>做账报税</dt>
            <dd class="right"></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>税务疑难 <br/>问题处理</dt>
            <dd></dd>
          </dl>
        </li>
      </ul>

      <ul>
        <li>
          <dl>
            <dt>打印装订 <br/> 凭证报表</dt>
            <dd class="left"></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>执照年检</dt>
            <dd class="left"></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>残疾人保 <br/>障金年审</dt>
            <dd class="left"></dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>整理乱账</dt>
            <dd></dd>
          </dl>
        </li>
        <div class="bottom"></div>
      </ul>
    </section>
    <section class="need">
      <van-title :border="false" title="代理记账所需材料"/>
      <ul>
        <li>1.银行回单、银行对账单、国地税交税回单、社保扣费回单、公积金扣费回单</li>
        <li> 2.收入发票、税控器开具发票明细、收入账的进账说明</li>
        <li> 3.经营过程中支出发票、成本费、各项费用发票</li>
        <li> 4.董事、监事和经理的任职文件及身份证复印件</li>
        <li> 5.自己开出的销售发票、员工工资表</li>
        <li> 6.费用发票：【含房租、水电管理费、交通费、通讯费等】</li>
      </ul>
    </section>
    <section class="advantage">
      <van-title :border="false" title="我们的优势"/>
      <ul>
        <li>
          <img src="~assets/advantage1.png"/>
          <div>
            <h2>全面风险把控</h2>
            <p>多对一、团队对一的复核记账方式及时申报，避免财务处罚</p>
          </div>
        </li>
        <li>
          <img src="~assets/advantage2.png"/>
          <div>
            <h2>资深会计团队</h2>
            <p>专业代理记账，会计团队平均5年会计经验，欢迎您来访考察</p>
          </div>
        </li>
        <li>
          <img src="~assets/advantage3.png"/>
          <div>
            <h2>贴心财税指导</h2>
            <p>
              贴心财税指导，为您解决公司
              不同发展阶段的服务需求
            </p>
          </div>
        </li>
        <li>
          <img src="~assets/advantage4.png"/>
          <div>
            <h2>上门取票取证</h2>
            <p>
              避免路上奔波，耗费精力不浪
              费您宝贵的的每一分每一秒
            </p>
          </div>
        </li>
      </ul>
    </section>
    <van-footer/>
  </div>
</template>

<script>
  import VanFooter from "../components/van-footer";

  export default {
    name: "agentBookKeep",
    components: {VanFooter}
  }
</script>

<style scoped lang="less">
  .agent-book-keep {
    > img {
      width: 100%;
      display: block;
    }

    .process {
      border-bottom: 3px solid #eee;
      padding-bottom: 30px;

      ul {
        margin-top: 30px;
        display: flex;
        flex-wrap: wrap;
        padding: 0 10px;
        position: relative;

        li {


          dl {
            display: flex;
            align-items: center;

            dt {
              font-size: 10px;
              font-weight: 800;
              color: #131313;
              width: 56px;
              height: 56px;
              border: 1px solid #AB2334;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            dd {
              margin-left: 10px;
              margin-right: 10px;
            }
          }


          .left {
            width: 13px;
            height: 12px;
            background: url("../assets/left.png") no-repeat center;
            background-size: 100%;
          }

          .right {
            width: 13px;
            height: 12px;
            background: url("../assets/right.png") no-repeat center;
            background-size: 100%;
          }
        }

        .bottom {
          width: 13px;
          height: 12px;
          background: url("../assets/bottom.png") no-repeat center;
          background-size: 100%;
          position: absolute;
          right: 55px;
          top: -22px;
        }
      }
    }

    .need {
      margin: 0 8px 0 6px;

      ul {
        margin-top: 31px;
        padding: 29px 0 29px 31px;
        background: #FFFFFF;
        box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.29);
        border-radius: 5px;

        li {
          font-size: 11px;
          font-weight: 400;
          color: #383536;
          line-height: 21px;
        }
      }
    }

    .advantage {
      padding-left: 10px;
      padding-bottom: 5px;
      border-bottom: 3px solid #eee;

      ul {
        display: flex;
        flex-wrap: wrap;
        padding-top: 30px;

        li {
          width: 165px;
          display: flex;
          flex-direction: column;
          position: relative;
          margin-bottom: 25px;

          &:nth-child(1), &:nth-child(3) {
            margin-right: 25px;
          }

          img {
            width: 100%;
            height: 100px;
          }

          > div {
            background: #E2E2E2;
            padding: 14px 13px 21px 13px;

            h2 {
              font-size: 12px;
              text-align: center;
            }

            p {
              margin-top: 13px;
              font-size: 10px;
              font-weight: 400;
              color: #373737;
            }
          }
        }
      }
    }
  }
</style>
